<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Buy",
  data(){
    return{
      user:{},
      page:{},
      pageSize:5,
      searchKey:'',
      showData:{
        user:{
          headphoto:''
        }
      },
      dialogVisible:false,
      title:'',
      cartNum:1,
    }
  },
  methods:{
    addCart(){
      if(this.showData.user.id===this.user.id){
        this.$message.info('您无法购买自己的产品')
      }else {
        this.$axios.post('cart/add?userId='+this.user.id+'&productId='+this.showData.id+'&number='+this.cartNum).then(resp=>{
          if (resp.data.flag){
            this.$message.success(resp.data.msg)
          }else {
            this.$message.error(resp.data.msg)
          }
        })
      }
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    paging(curPage){
      this.$axios.get('buy/list?curPage='+curPage+'&pageSize='+this.pageSize+'&searchKey='+this.searchKey).then(resp=>{
        if (resp.data.flag){
          this.page=resp.data.data
        }
      })
    },
    openInfo(product){
      this.showData=product
      this.title=product.name
      this.dialogVisible=true
    },
  },
  created() {
    this.user=getUser()
    this.paging(1)
  }
}
</script>

<template>
<div>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-input v-model="searchKey" placeholder="请输入要查询的名称"></el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" @click="paging(1)">查询</el-button>
    </el-col>
  </el-row>
  <div class="waterfall" style="
  margin-top: 10px;
  padding-left: 10px;
  column-count: 6;
  column-gap: 0;
  margin-bottom: 150px;">
    <div class="watch_item"
         style="
                break-inside: avoid;
                width: 175px;
                margin-bottom: 12px;
                border-radius: 5px;
                padding-bottom: 5px;"
         v-for="item in page.list"
    >
      <img :src="item.coverPath" alt="" srcset="" style="border-radius: 10px;" width="175px" height="auto" @click="openInfo(item)">
      <div class="watch_item_middle" style="padding: 5px;display: flex;  justify-content: center;color: rgb(91, 50, 227)"><span v-html="item.name"></span></div>

      <div class="watch_item_bottom"
           style="padding: 15px;
          height: 25px;
          line-height: 12px;
          text-align: center;
          font-weight: 500;
          font-size: 27px;
          color: #333;
          display: flex;
          justify-content: space-around;">
        <div>
          <span style="font-size: small">{{item.describe}}</span>
        </div>
      </div>
    </div>
  </div>

  <el-pagination
    style="display: flex;  justify-content: center;"
    @size-change="handleSizeChange"
    @current-change="paging"
    :current-page="page.pageNum"
    :page-sizes="[5,10,15,20]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total">
  </el-pagination>

  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="500px">
    <div class="block">
      <el-carousel height="200px">
        <el-carousel-item v-for="photo in showData.photoList" :src="photo.photopath">
          <img :src="photo.photopath" style="height: 200px;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-divider content-position="right">{{showData.name}}</el-divider>
    <div>
      <img class="user-avatar" :src="showData.user.headphoto" alt="头像" v-if="showData.user.headphoto!==null">
      <img  class="user-avatar" src="http://192.168.138.131:9000/picture/headPhoto.png"  alt="头像" v-if="showData.user.headphoto===null">
      &nbsp;&nbsp;
      <span style="font-size: large">{{showData.user.name}}</span>
    </div>
    <el-divider content-position="left">{{showData.name}}</el-divider>
    <div>
      <span style="font-size: larger;color: blue">{{showData.describe}}</span>
    </div>
    <br>
    <div>
      <span style="font-size: large">价格：<span style="color: orange">{{showData.price}}</span>元/个</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span style="font-size: large">库存：<span style="color: orange">{{showData.number}}</span></span>
      <br>
      <span>购买数量：</span>
      <el-input-number v-model="cartNum"  :min="1" :max="showData.number" label="描述文字"></el-input-number>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addCart">加入购物车</el-button>
    </span>
  </el-dialog>
</div>
</template>

<style scoped>
.user-avatar {
  margin-left: 6px;
  margin-top: 3px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 15px;
}
.watch_item:hover {
  cursor: pointer;
  transform: scale(1.02);
  transition-duration:0.1s;
  transition-timing-function:linear;
  transition-delay:0s;
  transition-property:all;
  box-shadow:5px 5px 20px 5px rgba(0,0,0,0.15);
  // 对比度变为之前的1.35倍
  filter: contrast(1.45);
  background-color: rgb(255, 255, 255,0.5);
}
.el-carousel__item img {
  display: block;
  margin: 0 auto;
}

</style>
